import styled from 'styled-components'
import border from 'components/styled/border.js'

const TitlebarStyle = border({
    width: '0 0 1px 0',
    comp:styled.div`
    padding: 0 .6rem 0 .6rem;
    width: 100%;
    height: .45rem;
    line-height: .45rem;
    ul{
        display:flex;
        justify-content:space-between;
        align-items: center;
        li{
            color: #646464;
            font-size: .13rem;
            &.active{
                color:#56D9D1;
            }
        }
    }

`
})

const ListStyle =border({
    width: '0 0 1px 0',
    comp:styled.div`
    display: flex;
    width: 100%;
    overflow: auto;
    .image{
        padding: .18rem .15rem .2rem .15rem;
       img{
        width: .54rem;
        height: .54rem;
       }
    }
    .right{
        width:2.91rem;
       .first{
            display: flex;
            justify-content:space-between;
            padding: .15rem .2rem .07rem 0;
            .name{
                color: #646464;
                font-size: .13rem;
            }
            .reward{
                display: flex;
                color: #646464;
                font-size: .1rem;
            }

       }
       .second{
           display:flex;
           align-items: center;
           height
           .grade{
                color: #646464;
                font-size: .09rem;
                padding-right: .02rem;
           }
       }
       .third{
           display: flex;
           justify-content: space-between;
           padding-right: .15rem;
           p{
               color: #C0C0C0;
               font-size: .11rem;
           }
           .qiangdan{
               display: flex;
               p.ren{
                    color: #646464;
                    font-size: .09rem;
                    padding-right: .03rem
               }
                img{
                width: .25rem;
                height: .25rem;
               }
           }
       }

    }
 
`
})

const LineStyle = styled.div`
    display: flex;
    align-items: center;
    padding-right: .15rem;
    .touxiang{
        padding: .15rem;
        img{
            width: .35rem;
            height: .35rem;
        }
    }
    .container{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .middle{
            .name{
                color: #646464;
                font-size: .13rem;
                padding-bottom: .06rem;
            }
            .dengji{
                display: flex;
                align-items: center;
                height: .2rem;
                p{
                    color: #646464;
                    font-size: .13rem;
                    line-height: .2rem;
                    padding-left: .15rem;
                }
            }
        }
    }
   
`

export {
    TitlebarStyle,
    ListStyle,
    LineStyle

}